<template>
    <div>
        <el-table
                :data="serviceList.slice((pageNum-1) * 10,pageNum * 10)"
                border
                row-key="id"
                stripe
                style="width: 100%"
        >
            <el-table-column type="expand" label="problem" width="80">
                <template slot-scope="quest">
                    <div v-for="item in quest.row.problemVoList" :key="item.id">
                        <span>{{item.problemDescription}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="requestName"
                    label="Request Number"
            />
            <el-table-column
                    prop="workingNo"
                    label="Working Number"
            />
            <el-table-column
                    prop="requestDate"
                    label="Request Date"
            />
            <el-table-column
                    prop="requestBy"
                    label="Request By"
            />
            <el-table-column
                    prop="plateNum"
                    label="PlateNum"
            />
            <el-table-column
                    prop="serviceType"
                    label="Service Type"
            />
            <el-table-column>
                <template slot-scope="request">
                    <slot  v-bind:row="request.row"></slot>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination background
                           :page-size=10
                           @current-change="changePage"
                           layout="prev, pager, next"
                           :total="total"></el-pagination>
        </div>
    </div>
</template>

<script>
    import mixins from '../../util/mixins'
    export default {
        name: "service-list",
        mixins:[mixins],
        props:{
            serviceList:Array
        }
    }
</script>

<style scoped>
    .page{
        text-align:center;
        margin-top: 10px;
    }
</style>